﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Visualizers</title>
    <link rel="stylesheet" type="text/css" href="../Style.css" />
    <base target="_blank" />
</head>
<body>
    <h1>
        Visualizers</h1>
    <p>
        The Reports Module displays data using a <dfn>Visualizer</dfn>. A <dfn>Visualizer</dfn>
        is a component which is capable of displaying tabular data. This section describes each        Visualizer and the settings associated with it.</p>
    <p>
        The Reports Module comes with 5 Visualizers, 3 of which are installed by default.
        <dl>
            <dt><a href="#Grid">Grid Visualizer</a></dt>
            <dd>
                Displays data in a Grid format, allowing Paging and Sorting</dd>
            <dt><a href="#HTML">HTML Template Visualizer</a></dt>
            <dd>
                Displays data by processing an (X)HTML Template to replace tokens with values retrieved
                from the database.
            </dd>
            <dt><a href="#XSLT">XSLT Transformation Visualizer</a></dt>
            <dd>
                Displays data by converting it to a well-defined XML format (see the <kbd>Show Xml Source</kbd>
                command) and running an XSLT Transformation to produce HTML
            </dd>
            <dt><a href="#Chart">Chart Visualizer</a></dt>
            <dd>
                Displays data by producing a Bar or Column chart comparing two fields from the returned
                dataset. Powered by the <a href="http://www.zedgraph.org">ZedGraph</a> Graphing
                Library for .Net
            </dd>
            <dt>Microsoft ReportViewer Visualizer</dt>
            <dd>
                Displays reports produced in <a href="http://www.microsoft.com/sql/technologies/reporting/rdlspec.mspx">
                    Microsoft Report Definition Language </a>. This includes reports which are processed
                locally on the web server as well as reports processed on a <a href="http://www.microsoft.com/sql/technologies/reporting/default.mspx">
                    Microsoft SQL Server Reporting Services </a>server.
            </dd>
        </dl>
    </p>
    <h2>
        <a name="Grid">Grid Visualizer</a></h2>
    <p class="note">
        Installed By Default</p>
    <p>
        <div class="captioned_image">
            <img src="Images/GridVisualizer-Overview.png" alt="Grid Visualizer" />
            <p class="caption">
                Figure 1 - The Grid Visualizer
            </p>
        </div>
        The Grid Visualizer displays data in a tabular grid and supports Paging and Sorting.
        If sorting is enabled, each column header can be clicked to toggle that column between
        ascending and descending sorting. The page links at the bottom can be clicked to
        jump between pages of data.
    </p>
    <p>
        The Grid Visualizer allows administrators to customize the appearance of the grid
        in a few ways. First, they can enable or disable the Paging and Sorting features,
        and set the size of a Page if Paging is enabled. Administrators can also choose
        to show or hide the column headers (Note: If column headers are hidden and sorting
        is enabled, users will have no way to sort the data). The display of grid lines
        in the resulting grid can be controlled as well. For finer grained control over
        the appearance of the Grid, Administrators can also attach CSS Classes and CSS Attributes
        to the entire Grid.
    </p>
    <p>
        For even more control over the styling of the grid, the Grid Visualizer defines
        the following CSS Classes that can be implemented in a Portal's CSS file:
        <dl>
            <dt>
                <samp>
                    Reports_Header</samp></dt>
            <dd>
                Applied to the header of the Grid</dd>
            <dt>
                <samp>
                    Reports_Row</samp></dt>
            <dd>
                Applied to every row of the Grid</dd>
            <dt>
                <samp>
                    Reports_AlternatingRow</samp></dt>
            <dd>
                Applied to alternating rows of the Grid</dd>
            <dt>
                <samp>
                    Reports_Pager</samp></dt>
            <dd>
                Applied to the pager at the bottom of the Grid</dd>
        </dl>
        These classes can be used either to change the style of all Grids in a portal by
        defining them in a Portal CSS file, or by using the <kbd>CSS Class</kbd> setting
        to apply a unique CSS Class to the entire grid. You can also use the cascading nature
        of CSS to apply styles to particular instances of the Grid Visualizer. For example,
        if the <kbd>CSS Class</kbd> setting for a particular instance of the Grid Visualizer
        has been set to
        <samp>
            CustomersReport</samp>, then the following CSS will change the background color
        of alternating rows in the Grid to "white":
    </p>
    <pre class="code">.CustomersReport .Reports_AlternatingRow
{
    background-color: white;
}</pre>
    <p>
        Changes to CSS can be made in the <kbd>Admin > Site Settings</kbd> page.
    </p>
    <h2>
        <a name="HTML">HTML Template Visualizer</a></h2>
    <p class="note">
        Installed By Default</p>
    <p>
        <div class="captioned_image floating_right">
            <img src="Images/HTMLVisualizer-Overview.png" alt="HTML Template Visualizer" />
            <p class="caption">
                Figure 2 - The HTML Template Visualizer
            </p>
        </div>
        The HTML Template Visualizer uses an HTML Template file to display the data retrieved
        in the report. The template file is processed once for each row and then rendered
        as a list. Each Template is processed by locating tokens of the form
        <samp>
            [Column Name]</samp>
        in the Template and replacing them with the value of
        <samp>
            Column Name</samp>
        in the returned dataset.
    </p>
    <p>
        For example, the following HTML Template was used to produce the output seen in
        Figure 2 on the right.
    </p>
    <pre class="code ClearHTMLTemplateImage">&lt;h1&gt;Module #[ModuleID]&lt;/h1&gt;
&lt;p&gt;Title: [ModuleTitle]&lt;/p&gt;</pre>
    <p>
        The HTML Template Visualizer automatically processes every row retrieved from the
        data source. If you wish to display just one row, or a smaller set of rows, you
        must change the Data Source to have it return only the rows you need.
    </p>
    <h2>
        <a name="XSLT">XSLT Transformation Visualizer</a></h2>
    <p class="note">
        Installed By Default</p>
    <p>
        The XSLT Transformation Visualizer uses an XSLT Transformation file and XML produced
        by the Data Source to produce HTML that is used to display the report. The XML produced
        by the Data Source has the following format:
    </p>
    <pre class="code">&lt;DocumentElement&gt;
  &lt;QueryResults&gt;
    &lt;Column1Name&gt;Column1Value&lt;/Column1Name&gt;
    &lt;Column2Name&gt;Column2Value&lt;/Column2Name&gt;
    ...
  &lt;/QueryResults&gt;
  &lt;QueryResults&gt;
    ... Same as above, for Row 2 ...
  &lt;/QueryResults&gt;
  ...</pre>
    <p>
        To ensure the correctness of your XSLT, you can use the <kbd>Show Xml Source</kbd>
        command to check the exact XML returned by your Data Source configuration.
    </p>
    <p>
        As an example, to reproduce the results of the HTML Template Visualizer sample shown
        in Figure 2 above, the following XSLT would be used:
    </p>
    <pre class="code">&lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
  &lt;xsl:output method="xml" indent="yes" 
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" /&gt;
    
  &lt;xsl:template match="/DocumentElement/QueryResults"&gt;
    &lt;h1&gt;Module #&lt;xsl:value-of select="ModuleID" /&gt;&lt;/h1&gt;
    &lt;p&gt;Title: &lt;xsl:value-of select="ModuleTitle" /&gt;&lt;/p&gt;
  &lt;/xsl:template&gt;
&lt;/xsl:stylesheet&gt;</pre>
    <p>
        Similar to the HTML Template Visualizer, all of the data retrieved from the Data
        Source will be displayed in this Visualizer. If you wish to restrict the amount
        of data displayed, you must modify your Data Source configuration
    </p>
    <h2>
        <a name="Chart">Chart Visualizer</a></h2>
    <p class="note">
        Installed By Default</p>
    <div class="captioned_image">
        <img src="Images/ChartVisualizer-Overview.png" alt="Chart Visualizer" />
        <p class="caption">
            Figure 3 - The Chart Visualizer
        </p>
    </div>
    <p>
        The Chart Visualizer uses the settings you configure to render a Chart based on
        the results of the query. Administrators can configure various settings, which are
        detailed below:
    </p>
    <dl>
        <dt>Chart Type</dt>
        <dd>
            The type of chart that will be rendered:
            <dl>
                <dt>Horizontal Bar Chart</dt>
                <dd>A Bar Chart with bars stretching from left to right</dd>
                <dt>Vertical Column Chart</dt>
                <dd>A Bar Chart with bars stretching from bottom to top</dd>
            </dl>
            Note that the <kbd>X-Axis Title</kbd> and <kbd>Y-Axis Title</kbd> settings
            still refer to the Horizontal and Vertical axes (respectively), no matter
            what value this setting has.
        </dd>
        <dt>Width/Height</dt>
        <dd>
            Set the width and height of the produced chart in pixels</dd>
        <dt>X-Axis Title</dt>
        <dd>
            The title to be displayed along the X-Axis (Horizontal) of the chart</dd>
        <dt>Y-Axis Title</dt>
        <dd>
            The title to be displayed along the Y-Axis (Vertical) of the chart</dd>
        <dt>Bar Name Column</dt>
        <dd>
            The name of the column in the produced dataset that will be used as the name of
            each bar in the chart
        </dd>
        <dt>Bar Value Column</dt>
        <dd>
            The name of the column in the produced dataset that will be used to determine the
            height of each bar in the chart
        </dd>
        <dt>Bar Color Mode</dt>
        <dd>
            The way in which the color of each bar will be determined:
            <dl>
                <dt>One Color for every Bar</dt>
                <dd>
                    Every bar has the same color</dd>
                <dt>One Color per Bar</dt>
                <dd>
                    The color of each bar is given by a column in the dataset</dd>
            </dl>
        </dd>
        <dt>Bar Color (Visible if <kbd>One Color for every Bar</kbd> is selected)</dt>
        <dd>
            The color to use for the bars in the chart</dd>
        <dt>Bar Color Column (Visible if <kbd>One Color per Bar</kbd> is selected)</dt>
        <dd>
            The name of the column containing the color for each bar in the chart</dd>
    </dl>
    <div class="captioned_image">
        <img src="Images/ChartVisualizer-Settings.png" alt="Chart Visualizer Settings" />
        <p class="caption">
            Figure 4 - The Chart Visualizer Settings page
        </p>
    </div>
</body>
</html>
